<template>
    <div class="sales-statistics">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>销售订单统计</span>
        </div>
        <div ref="chart" class="chart-container" style="height: 400px;"></div>
      </el-card>
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  
  export default {
    setup() {
      const chart = ref(null);
  
      onMounted(() => {
        // 初始化 ECharts 实例
        const myChart = echarts.init(chart.value);
  
        // 模拟销售订单数据
        const salesData = [
          { month: '一月', amount: 32000 },
          { month: '二月', amount: 28000 },
          { month: '三月', amount: 35000 },
          { month: '四月', amount: 31000 },
          { month: '五月', amount: 38000 },
          { month: '六月', amount: 42000 },
          { month: '七月', amount: 39000 },
          { month: '八月', amount: 37000 },
          { month: '九月', amount: 43000 },
          { month: '十月', amount: 41000 },
          { month: '十一月', amount: 45000 },
          { month: '十二月', amount: 48000 }
        ];
  
        // 准备 x 轴和 y 轴的数据
        const xAxisData = salesData.map(item => item.month);
        const seriesData = salesData.map(item => item.amount);
  
        // 设置图表配置项
        const options = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: seriesData,
            type: 'line'
          }]
        };
  
        // 使用配置项绘制图表
        myChart.setOption(options);
  
        // 自适应大小
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      });
  
      return {
        chart
      };
    }
  };
  </script>
  
  <style scoped>
  .sales-statistics {
    padding: 20px;
    width: 80%;
  }
  
  .el-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .chart-container {
    margin-top: 20px;
  }
  </style>
  